import { useEffect } from "react";
import { Form, Input, Button } from "antd-mobile";
import { useAuthStore } from "@/store";
import { useRouter } from "next/router";
import { isMobile } from "@/utils/utils";
import styles from "@/styles/login.module.scss";

const Login = () => {
  const { token, login } = useAuthStore();
  const router = useRouter();
  useEffect(() => {
    if (token) {
      router.replace("/");
    }
  }, [token, router]);
  const [form] = Form.useForm();
  const onFinish = (values: any) => {};
  const isMobileScreen = isMobile();
  return (
    <>
      <div className={styles["wrapper"]}>
        <div
          className={
            styles["login"] +
            ` ${isMobileScreen ? styles["login--mobile"] : ""}`
          }
        >
          <div className={styles["login-leading"]}>
            <div className={styles["login-leading-image"]}></div>
          </div>
          <div className={styles["login-title"]}>
            <div className={styles["login-title-text"]}>金融信创运维大模型</div>
          </div>
          <Form
            mode="card"
            form={form}
            className={`${styles["login-form"]} `}
            onFinish={login}
            footer={
              <Button
                block
                color="primary"
                type="submit"
                className={styles["submit"]}
              >
                登录
              </Button>
            }
          >
            <Form.Item
              name="username"
              label="用户名"
              rules={[{ required: true, message: "用户名不能为空" }]}
            >
              <Input placeholder="请输入用户名" clearable />
            </Form.Item>
            <Form.Item
              name="password"
              label="密码"
              rules={[{ required: true, message: "密码不能为空" }]}
            >
              <Input placeholder="请输入密码" clearable type="password" />
            </Form.Item>
          </Form>
        </div>
      </div>
    </>
  );
};
export default Login;
